<!--
 * @Author: 白袂 1741866590@qq.com
 * @Date: 2023-09-05 16:33:47
 * @LastEditors: 白袂 1741866590@qq.com
 * @LastEditTime: 2024-05-10 13:10:25
 * @FilePath: \obj_system\src\views\home\Menus.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="userinfo">
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ userInfo.userName }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item ><span @click="exitNO">退出账号</span></el-dropdown-item>
          <el-dropdown-item ><span @click="myInfo">个人中心</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-dialog 
            :title="orderTitle"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose">
            
            <el-descriptions v-model="userInfo"  direction="vertical" :column="2" border>
              <el-descriptions-item label="用户名" class="el-icon-user">{{ userInfo.userName }}</el-descriptions-item>
              <el-descriptions-item label="密码">******</el-descriptions-item>
              <el-descriptions-item label="身份">
                <el-tag size="small">{{ (userInfo.identity == 3)? "超级管理员": "商户" }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="用户状态" :span="1">
                  <el-tag size="small">{{ (userInfo.store == 1)? "正常": "冻结" }}</el-tag>
              </el-descriptions-item>
              

            </el-descriptions>
              
              
            
        </el-dialog>
    </div>
</template>
<script>

  export default {
    data() {
      return {
        
        activeIndex: '1',
        activeIndex2: '1',
        dialogVisible: false,  //预览dialog
        orderTitle: "个人信息",
        userInfo: {
            userName: "admin",
            identity: "1",
            store: 1
        }
      };
    },
    methods: {
        myInfo() {
            this.dialogVisible = true;
        },
        //关闭预览
        handleClose(done) {
            this.dialogVisible = false;
        },

      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },

      exitNO() {
        console.log(666)
        this.$confirm('退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }) .then(() => {

          // setTimeout(() => { bug
           setTimeout(() => {
             this.$store.dispatch('logout'); 
              localStorage.removeItem("localUser"); 
              this.$router.push({ path: '/login' })
             
              this.$message({
                type: 'success',
                message: '已退出登录!'
              })
           }, 1000)
          
          }, 1000)
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
        }
    },
    created() {
      let getUser = localStorage.getItem("localUser");
      let data = JSON.parse(getUser);
      console.log(data, 'data');
      this.userInfo.userName = data.user;
      this.userInfo.identity = data.role;
      
    }
  }
</script>
<style lang="less" scoped>
.el-menu {
  // width: 50%;
  overflow:hidden;
}
.el-submenu .el-menu-item {
  max-width: 200px;
}
.userinfo {
  margin: 0;
  padding: 0s;
  height: 10vh;
  line-height: 8vh;
  color: #fff;
}

span.el-dropdown-link {
  color: #fff;
}

//设置选鼠标指针浮动在一级菜单的设置
.el-menu-item:hover{
  background-color: aqua !important;;
}

//设置一级菜单和二级菜单的背景颜色
.el-sub-menu .el-menu-item {
  background-color: #3170a7 !important;
}
</style>